<template>
  <el-dialog
    v-if="visible"
    :close-on-click-modal="false"
    append-to-body
    :title="clickData.title"
    :visible.sync="visible"
    @close="cancel"
    :show="show"
    width="35%"
  >
    <el-form size="mini" @submit.native.prevent>
      <el-form-item style="width:90%;margin:auto;">
        <div class="filterDiv">
          <div v-if="params.type == '17'">
            <formSelect
              title=""
              content="请选择"
              type="21"
              :selectData="selectData"
            ></formSelect>
          </div>
          <div style="width:100%">
            <el-input
              size="mini"
              style="width:80%"
              placeholder="请输入内容"
              v-model="keyword"
              prefix-icon="el-icon-search"
              class="input-with-select"
            >
            </el-input>
            <el-button
              style="margin-left:10px;"
              type="primary"
              @click="filterNode"
              >查询</el-button
            >
          </div>
        </div>
      </el-form-item>
      <el-form-item>
        <div
          v-if="reload"
          class="contentareawrap"
          style="margin-top: 10px; height: 330px; overflow-y: auto"
        >
          <el-tree
            class="filter-tree"
            empty-text="暂无数据"
            :expand-on-click-node="expand"
            highlight-current
            :props="params.defaultProps"
            :load="loadNode"
            node-key="id"
            ref="modeltree"
            @node-click="handleNodeClick"
            lazy
          >
          </el-tree>
          <el-button
            v-if="params.type === '17' && this.clickData.id === '0'"
            type="text"
            style="margin-left:24px"
            @click="isshow = true"
            >包管理
          </el-button>
          <el-pagination
            small
            v-if="params.type === '17' && loadType === '1'"
            class="pagination"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :pager-count="pagecount"
            :page-sizes="[5, 10, 15]"
            :page-size="limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
          <sitePackageDialog
            @reloadData="reloadData"
            :params="$attrs"
            :show.sync="isshow"
            title2="站点包管理"
          >
          </sitePackageDialog>
        </div>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="addtag">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import sitePackageDialog from './sitePackageDialog'
import formSelect from '@/components/conditionComponents/formSelect.vue'
export default {
  name: 'treeLazyDialog',
  inheritAttrs: false,
  props: {
    show: {
      type: Boolean,
      default: false
    },
    clickData: {
      type: Object,
      default: () => {}
    },
    params: {
      type: Object,
      default: () => {}
    },
    formData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      pid: '',
      visible: this.show,
      isshow: false,
      chekedKeys: [],
      keyword: '',
      checkedId: [],
      checkedNode: [],
      reloadNode: {},
      expand: false,
      reload: true,
      loadType: '0',
      pagecount: 5, // 分页显示几个按钮
      total: 0, // 总条数
      limit: 10, // 每页显示条数
      currentPage: 1, // 当前第几页
      selectData: [
        {
          lable: '站点',
          id: '1'
        },
        {
          lable: '频道',
          id: '2'
        },
        {
          lable: '子站点',
          id: '3'
        }
      ]
    }
  },
  methods: {
    // 改变当前显示条数
    handleSizeChange(val) {
      this.limit = val
      this.reloadData()
    },
    // 当前页数跳转
    handleCurrentChange(val) {
      this.currentPage = val
      this.reloadData()
    },
    reloadData() {
      this.reload = false
      this.$nextTick(function() {
        this.reload = true
      })
    },
    handleNodeClick(data, node, own) {
      switch (this.params.type) {
        case '11':
          if (this.formData.platform === '') {
            this.setClickChildrenNode(data, node, own)
          } else this.setClickParentNode(data, node, own)
          break
        case '17':
          switch (this.clickData.id) {
            case '0':
              this.setClickParentNode(data, node, own, 'UB1')
              break
          }
      }
    },
    // 只能选择子节点
    setClickChildrenNode(data, node, own) {
      if (node.level !== 1) {
        this.setClickParentNode(data, node, own)
      }
    },
    // 选择所有节点
    setClickParentNode(data, node, own, arg) {
      let index1 = this.checkedId.indexOf(data.id)
      if (arg) {
        if (arg !== data.id) {
          if (index1 === -1) {
            this.checkedId.push(data.id)
            this.checkedNode.push(data.newlable)
            own.$children[0].$el.innerHTML = data.newlable + ' ✔'
          } else {
            this.checkedId.splice(index1, 1)
            this.checkedNode.splice(index1, 1)
            own.$children[0].$el.innerHTML = data.newlable
          }
        }
      } else {
        if (index1 === -1) {
          this.checkedId.push(data.id)
          this.checkedNode.push(data.newlable)
          own.$children[0].$el.innerHTML = data.newlable + ' ✔'
        } else {
          this.checkedId.splice(index1, 1)
          this.checkedNode.splice(index1, 1)
          own.$children[0].$el.innerHTML = data.newlable
        }
      }
    },
    loadNode(node, resolve) {
      switch (this.params.type) {
        case '11':
          switch (this.clickData.id) {
            case '0':
              this.modelloadNode(node, resolve)
              break
            case '1':
              this.firmloadNode(node, resolve)
              break
            case '2':
              this.productloadNode(node, resolve)
              break
            case '3':
              this.personloadNode(node, resolve)
              break
          }
          break
        case '17':
          if (this.loadType === '1') {
            this.siteFilterloadNode(node, resolve)
          } else this.siteloadNode(node, resolve)
      }
    },
    // 筛选树性结构中数据
    filterNode() {
      this.reload = false
      switch (this.params.type) {
        case '11':
          this.loadType = '0'
          break
        case '17':
          this.loadType = '1'
          break
      }
      this.$nextTick(function() {
        this.reload = true
      })
    },

    addtag() {
      this.keyword = ''
      this.$emit('update:show', false)
      let param
      switch (this.params.type) {
        case '11':
          switch (this.clickData.id) {
            case '0':
              param = {
                module: this.checkedId,
                moduleNode: this.checkedNode
              }
              break
            case '1':
              param = {
                company: this.checkedId,
                companyNode: this.checkedNode
              }
              break
            case '2':
              param = {
                production: this.checkedId,
                productionNode: this.checkedNode
              }
              break
            case '3':
              param = {
                people: this.checkedId,
                peopleNode: this.checkedNode
              }
              break
          }
          break
        case '17':
          param = {
            siteInfor: this.checkedId,
            siteInforNode: this.checkedNode
          }
          break
      }
      this.$emit('setNewFormData', param)
    },
    addSelectType(data) {
      for (let i in data) {
        if (this.checkedId.includes(data[i].id)) {
          data[i].newlable = data[i].lable
          data[i].lable += ' ✔'
        } else {
          data[i].newlable = data[i].lable
        }
      }
      return data
    },
    // 设置接口参数
    setParams(node) {
      let params = { keyword: this.keyword }
      if (this.formData.platform === '') {
        switch (node.level) {
          case 0: // 如果是顶级的父节点
            params.productId = 0
            break
          case 1:
            this.pid = node.data.id
            params.productId = node.data.id
            break
          default:
            params.productId = this.pid
            params.fid = node.data.id
        }
      } else {
        params.productId = this.formData.platform
        if (node.level > 0) {
          params.fid = node.data.id
        }
      }
      return params
    },
    // 模块加载树结点
    modelloadNode(node, resolve) {
      let that = this
      let params = this.setParams(node)
      this.$axios.get('/getModuleTreeBeanList', params).then(res => {
        let result = res.data.result
        if (Object.prototype.toString.call(result) === '[object Array]') {
          let result = that.addSelectType(res.data.result)
          return resolve(result)
        } else {
          return resolve([])
        }
      })
    },

    // 公司加载树结点
    firmloadNode(node, resolve) {
      let that = this
      let params = this.setParams(node)
      this.$axios.get('/getCompanyTreeBeanList', params).then(res => {
        let result = res.data.result
        if (Object.prototype.toString.call(result) === '[object Array]') {
          let result = that.addSelectType(res.data.result)
          return resolve(result)
        } else {
          return resolve([])
        }
      })
    },

    // 产品加载树结点
    productloadNode(node, resolve) {
      let that = this
      let params = {
        keyword: this.keyword,
        companyAttrIds: this.formData.company.join(',')
      }
      if (this.formData.platform === '') {
        switch (node.level) {
          case 0: // 如果是顶级的父节点
            params.productId = 0
            break
          default:
            params.productId = node.data.id
            break
        }
      } else {
        params.productId = this.formData.platform
      }
      this.$axios.get('/getCompanyProductTreeBeanList', params).then(res => {
        let result = res.data.result
        if (Object.prototype.toString.call(result) === '[object Array]') {
          let result = that.addSelectType(res.data.result)
          return resolve(result)
        } else {
          return resolve([])
        }
      })
    },

    // 人物加载树结点
    personloadNode(node, resolve) {
      let that = this
      let params = {
        keyword: this.keyword
      }
      if (this.formData.platform === '') {
        switch (node.level) {
          case 0: // 如果是顶级的父节点
            params.productId = 0
            break
          case 1:
            params.productId = node.data.id
            break
          default:
            return resolve([])
        }
      } else {
        params.productId = this.formData.platform
      }
      this.$axios.get('/getPeopleTreeBeanList', params).then(res => {
        let result = res.data.result
        if (Object.prototype.toString.call(result) === '[object Array]') {
          let result = that.addSelectType(res.data.result)
          if (that.formData.platform !== '') {
            result.forEach(item => {
              item.leaf = true
            })
          } else {
            if (node.level === 1) {
              result.forEach(item => {
                item.leaf = true
              })
            }
          }
          return resolve(result)
        } else {
          return resolve([])
        }
      })
    },
    // 站点加载树结点
    siteloadNode(node, resolve) {
      let that = this
      let id = ''
      if (JSON.parse(localStorage.getItem('userlist'))) {
        id = JSON.parse(localStorage.getItem('userlist')).id
      }
      let params = {
        userId: id
      }
      switch (node.level) {
        case 0: // 如果是顶级的父节点
          params.fid = ''
          break
        default:
          params.fid = node.data.id
          break
      }
      this.$axios.get('/getWsTreeBeanList', params).then(res => {
        let result = res.data.result
        if (Object.prototype.toString.call(result) === '[object Array]') {
          let result = that.addSelectType(res.data.result)
          return resolve(result)
        } else {
          return resolve([])
        }
      })
    },
    // 站点筛选
    siteFilterloadNode(node, resolve) {
      let that = this
      let params = {
        websType: this.formData.websType,
        keyword: this.keyword,
        pageSize: this.limit,
        pageNo: this.currentPage
      }
      this.$axios.get('/searchWebsit', params).then(res => {
        that.total = res.data.count
        let result = res.data.result
        if (Object.prototype.toString.call(result) === '[object Array]') {
          let result = that.addSelectType(res.data.result)
          return resolve(result)
        } else {
          return resolve([])
        }
      })
    },
    cancel() {
      this.keyword = ''
      this.$emit('update:show', false)
    }
  },
  watch: {
    show(val) {
      this.visible = val
      if (val) {
        switch (this.params.type) {
          case '11':
            switch (this.clickData.id) {
              case '0':
                this.checkedNode = Array.from(this.formData.moduleNode)
                this.checkedId = Array.from(this.formData.module)
                break
              case '1':
                this.checkedNode = Array.from(this.formData.companyNode)
                this.checkedId = Array.from(this.formData.company)
                break
              case '2':
                this.checkedNode = [...this.formData.productionNode]
                this.checkedId = [...this.formData.production]
                break
              case '3':
                this.checkedNode = Array.from(this.formData.peopleNode)
                this.checkedId = Array.from(this.formData.people)
                break
            }
            break
          case '17':
            this.checkedNode = Array.from(this.formData.siteInforNode)
            this.checkedId = Array.from(this.formData.siteInfor)
            break
        }
      }
    },
    resetFormData() {
      this.checkedId = []
      this.checkedNode = []
    }
  },
  components: {
    sitePackageDialog,
    formSelect
  }
}
</script>

<style scoped>
.filterDiv {
  display: flex;
  flex-direction: row;
}
.pagination {
  text-align: center;
}
</style>
